<template>
  <view class="root">
    <view class="content">
      <view class="care-item">
        <view class="item-title">
          <view class="dot"></view>
          {{alarmType[detail.type] ? alarmType[detail.type] : '暂无'}}
        </view>
        <view class="item-i">
          <view class="item-label">
            报警描述:
          </view>
          <view class="item-value">
            {{alarmDesc(detail)}}
          </view>
        </view>
        <view class="item-i">
          <view class="item-label">
            报警时间:
          </view>
          <view class="item-value">
            {{detail.eventTime}}
          </view>
        </view>
        <view class="item-i">
          <view class="item-label">
            报警地点:
          </view>
          <view class="item-value">
            {{detail.eventAddress}}
          </view>
        </view>
      </view>

      <view class="care-item bottom-box">
        <view class="item-title">
          <view class="dot"></view>
          处置信息
        </view>
        <view class="item-i">
          <view class="item-label">
            处置描述:
          </view>
          <view class="item-value">
            {{
              detail.handlingSituation
            }}
          </view>
        </view>
        <view class="item-i">
          <view class="item-label">
            处置人员:
          </view>
          <view class="item-value">
            {{
              detail.helpName 
            }}
            {{detail.helpPersonTypeText ? `(${detail.helpPersonTypeText})` : ''}}
          </view>
        </view>
        <view class="item-i">
          <view class="item-label">
            处置时间:
          </view>
          <view class="item-value">
            {{
              detail.updateTime
            }}
          </view>
        </view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    navTo,
    ColorButton,
    getOptionsParams,
    isLoading,
    alarmType
  } from '@/utils/util.js'
  import moment from '@/utils/moment'
  import {
    getAction
  } from '../../utils/request'


  export default {
    data() {
      return {
        scrllViewRef: null,
        searchValue: '',
        inputStyles: {
          background: '#f8f8f8',
          borderRadius: '340rpx 340rpx 340rpx 340rpx',
          border: '1rpx solid #F1F2F3',
        },
        staticParams: {},
        options: {},
        ColorButton,
        routerParams: {},
        alarmType: alarmType,
        detail: {}
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.initData()
    },
    onUnload() {},
    methods: {
      initData() {
        isLoading(true)
        getAction('/mini/wb/deviceevent/details', {
            id: this.routerParams.id
          })
          .then((res) => {
            this.detail = res.result
          })
          .finally(() => {
            isLoading(false)
          })
      },
      moment,
      input(val) {
        Object.assign(this.staticParams, {
          likeName: this.searchValue ? this.searchValue.trim() : '',
        })
        this.$refs.scrllViewRef.getList('init', this.staticParams)
      },
      handleAdd() {
        navTo({
          url: '/itemRegistration/secondHandMobile/secondHandMobileAdd',
          params: {
            companyMessageId: this.options.companyMessageId
          }
        })
      },
      handleDetail(id) {
        navTo({
          url: '/itemRegistration/secondHandMobile/secondHandMobileDetail',
          params: {
            id
          }
        })
      },
      alarmDesc(item) {
        if (item.type == 1) {
          return item.name + '发起SOS报警'
        }
        if (item.type == 4) {
          return item.name + '离开安全区域'
        }
        if (item.type == 8) {
          return item.name + '心率异常'
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #F9F9F9;


    .top {
      padding: 25rpx;
      background: #FFFFFF;

      /deep/ .is-input-border {
        background: #F8F8F8 !important;
        border-radius: 340rpx 340rpx 340rpx 340rpx !important;
        border: 1rpx solid #F1F2F3 !important;
      }
    }



    .content {
      flex: 1;
      padding: 10rpx 15rpx;
      height: 0;
    }

    .bottom {
      height: 120rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 24rpx;

      /deep/.u-button__text {
        font-weight: bold;
        font-size: 32rpx;
        color: #FAFAFA;
      }
    }

    .care-item {
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 33rpx 42rpx 26rpx 42rpx;

      .item-title {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 30rpx;
        display: flex;
        align-items: center;

        .dot {
          width: 12rpx;
          height: 12rpx;
          background: #FC590E;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          margin-right: 20rpx;
        }
      }

      .item-i {
        display: flex;
        margin-bottom: 14rpx;

        .item-label {
          font-weight: 500;
          font-size: 28rpx;
          color: #A1A1A1;
          flex-shrink: 0;
        }

        .item-value {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
          margin-left: 16rpx;
        }

      }
    }



    .bottom-box {
      margin-top: 12rpx;
    }
  }
</style>